<template>
  <div class="content-wrap" id="wrap">
    <el-image style="width: 100%; height: 100%" :src="src" fit="fill" usemap="#Map" id="qw"></el-image>
    <map name="Map" id="Map">
      <!-- <area id="1001" shape="circle" coords="1084,336,30" href="javascript:void(0)" @click="handlerFloor('1幢')" />
      <area id="1002" shape="circle" coords="847,585,30" href="javascript:void(0)" @click="handlerFloor('1幢')" />
      <area id="1003" shape="circle" coords="1329,472,30" href="javascript:void(0)" @click="handlerFloor('1幢')" />
      <area id="1004" shape="circle" coords="920,756,30" href="javascript:void(0)" @click="handlerFloor('1幢')" />
      <area id="1005" shape="circle" coords="1356,665,30" href="javascript:void(0)" @click="handlerFloor('1幢')" />
      
      <area id="1006" shape="circle" coords="1200,801,30" href="javascript:void(0)" @click="handlerFloor('1幢')" /> -->


      <area v-for="item in deviceList" :key="item.deviceNumber" shape="circle" :coords="item.position" href="javascript:void(0)" @click="show(item.deviceNumber)" />


    </map>

    <el-dialog :title="出入详情" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-row>
            <el-col :span="24">
                <div class="table-sty">
                    <el-table :data="tableDataList" style="width: 100%">
                        <el-table-column type="index" width="50px" :index="indexMethod" label="序号"></el-table-column>
                        <el-table-column  v-for="(value) in tableTitleList" :prop="value|pinyin" :label="value"> </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
    </el-dialog>
  </div>
</template>
<script>


const pinyin = require("js-pinyin");


const tableTitleList = ["人员姓名", "刷卡时间", "部门"];
const initialFormField = [];


const dataList = [
    ["徐列涛", "2023-12-21 08:20:32", "二级巡视员"],
    ["杨峭", "2024-01-21 08:20:32", "稽查局"],
];


for (let i in tableTitleList){
    initialFormField[i] = pinyin.getFullChars(tableTitleList[i]); 
}


const tableDataList = [];
for (let k in dataList){
    let data = {};
    for (let k2 in initialFormField){
        data[initialFormField[k2]] = dataList[k][k2];
    }
    tableDataList.push(data);
}
console.log(tableDataList);



export default {
  name: 'doorban',
  filters : {
        pinyin : function (value){
            return pinyin.getFullChars(value);
        }
    },
  data() {
    return {
      src: require('./doorban.jpg'),
      dialogFormVisible: false,
      deviceList:[
        {
          deviceNumber:"D0-001",
          position:"438,423,30",
        },{
          deviceNumber:"D0-002",
          position:"600,425,30",

        },{
          deviceNumber:"D0-003",
          position:"698,426,30"
        },
        {
          deviceNumber:"D0-009",
          position:"1251,437,30",
        },
        {
          deviceNumber:"D0-004",
          position:"428,868,30"
        }
      ],
      tableTitleList : tableTitleList,
      tableDataList : tableDataList
    };
  },
  created() {},
  mounted() {
    var test = document.getElementById('wrap');
    test.onmousemove = function (e) {
      var x = e.layerX;
      var y = e.layerY;
      e.target.title = 'X is ' + x + ' and Y is ' + y;
    };
  },
  methods: {
    show(deviceNumber) {
      var deviceInfo=this.deviceList.find(item=>{
        return item.deviceNumber == deviceNumber
      })

      this.formData=deviceInfo
      this.dialogFormVisible=true
    }
  }
};
</script>
<style lang="scss" scoped>
.content-wrap {
  margin: 50px;
  width: 2000px;
  height: 1000px;
}
</style>
